import { Breadcrumb, Descriptions, Divider, Flex, Input, Table, Tabs } from "antd";
import styled from "styled-components";
import BaseInfo from "./modules/BaseInfo";
import DataItems from "./modules/DataItems";
import InterfaceDescription from "./modules/InterfaceDescription";
import { Link } from "react-router-dom";
import { useParams, useSearchParams } from "@/router/hooks";
import { useEffect, useState } from "react";
import { dataSubjectDetail } from '@/api/sharing/dataSubject'
import { useDictionary } from "@/hooks";
import CallInformation from "./modules/CallInformation";
import { dmServiceDetail } from "@/api/sharing/dmService";
import DisplayLabel from "@/components/displayLabel";
import CodeEditor from "@/components/codemirror/CodeEditor";
const DataCatalogDetail = () => {
  useDictionary(['data_subject_type', 'param_type']);
  const { id: detailId } = useParams();
  const searchParams = useSearchParams();

  const [fullData, setFullData] = useState({})

  useEffect(() => {
    let api_fun = searchParams.get('accessType') === 'DAMENG' ? dmServiceDetail : dataSubjectDetail
    api_fun({ id: detailId }).then((res) => {
      if (searchParams.get('accessType') === 'DAMENG') {
        setFullData(Object.assign(res?.result || {}, res?.result?.baseData || {}))
      } else {
        setFullData(res?.result || {})
      }
    })
  }, [])

  const items = [
    {
      key: '1',
      label: '基本信息',
      children: <BaseInfo fullData={fullData} />,
    },
    {
      key: '2',
      label: '调用信息',
      children: <CallInformation fullData={fullData} />,
    },
    {
      key: '3',
      label: '数据项',
      children: <DataItems fullData={fullData} />,
    },
    // {
    //   key: '4',
    //   label: '数据预览',
    //   children: <InterfaceDescription fullData={fullData} />,
    // },
  ];

  const dmItems = [
    {
      key: '1',
      label: '基本信息',
      children: <DmBaseInfo fullData={fullData} />,
    },
    {
      key: '2',
      label: '调用信息',
      children: <DmCallInformation fullData={fullData} />,
    },

  ]

  const onTabsChange = (key) => {
    console.log(key);
  };
  return (<StyleWrap>
    <div className="page-breadcrumb">
      <Breadcrumb
        items={[
          {
            title: <Link to="/dataCatalog">数据目录</Link>,
          },
          {
            title: '目录详情-' + (fullData.themeName || fullData.serviceName),
          }
        ]}
      />
    </div>
    <Tabs defaultActiveKey="1" items={searchParams.get('accessType') === 'DAMENG' ? dmItems : items} onChange={onTabsChange}></Tabs>
  </StyleWrap>);
}

const DmBaseInfo = ({ fullData }) => {
  return <>
    <Descriptions
      bordered
      column={2}
      labelStyle={{
        textAlign: 'center',
        width: '165px'
      }}
    >
      <Descriptions.Item label="数据资源名称">{fullData.serviceName}</Descriptions.Item>
      <Descriptions.Item label="类型">{fullData.requestType}</Descriptions.Item>
      <Descriptions.Item label="请求方式">{fullData.requestType}</Descriptions.Item>
      <Descriptions.Item label="资源标识">{fullData.id}</Descriptions.Item>
      <Descriptions.Item label="资源描述" span={2}>{fullData.remark}</Descriptions.Item>
    </Descriptions>
  </>
}
const DmCallInformation = ({ fullData }) => {
  return <>
    <div className="section-title">信息项</div>
    <div className="section-content">
      <Table dataSource={fullData.itemList || []} pagination={false} columns={[
        {
          title: '序号',
          dataIndex: 'index',
          width: 50,
          render(text, _, index) {
            return index + 1
          }
        },
        {
          title: '字段名称',
          dataIndex: 'paramName',

        },
        {
          title: '字段类型',
          dataIndex: 'paramType',
        },
        {
          title: '字段长度',
          dataIndex: 'paramLength',
        },
        {
          title: '字段描述',
          dataIndex: 'paramRemark',
        },
      ]}></Table>
    </div>
    <Divider />
    <div className="section-title">查询参数</div>
    <div className="section-content">
      <Table dataSource={fullData.queryParamList || []} pagination={false} columns={[
        {
          title: '序号',
          dataIndex: 'index',
          width: 50,
          render(text, _, index) {
            return index + 1
          }
        },
        {
          title: '参数名称',
          dataIndex: 'paramName',
        },
        {
          title: '参数类型',
          dataIndex: 'paramType',
          valueType: 'select',
        },
        {
          title: '参数描述',
          dataIndex: 'paramRemark',
        },
      ]}></Table>
    </div>
    <Divider />
    <div className="section-title">请求示例</div>
    <Flex>
      <p style={{ flexShrink: 0, marginRight: 10 }}>请求地址</p>
      <Input value={fullData.accessUrl} readOnly />
    </Flex>
    <Flex style={{ marginTop: 10 }}>
      <div style={{ flex: 1 }}>
        <p>参数示例：</p>
        <CodeEditor readOnly={true} lang="json" value={JSON.stringify({ "resourceSign": fullData.id, "requestParams": [{ "paramName": "参数名", "paramValue": "参数值" }] }, null, 2)} height="200px" />
      </div>
      <Divider type="vertical" style={{ height: 'unset' }} />
      <div style={{ flex: 1 }}>
        <p>响应示例：</p>
        <CodeEditor readOnly={true} lang="json" value={JSON.stringify({ "success": true, "message": "操作成功！", "code": 200, "result": [], "timestamp": 1745931086622 }, null, 2)} height="200px" />
      </div>
    </Flex>
  </>
}

const StyleWrap = styled.div`
  padding: 16px;
  .ant-tabs .ant-tabs-nav{
    margin-bottom: 30px;
  }
  .section-title{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #fff;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 20px;
  }
`

export default DataCatalogDetail;